<template>
  <div
    :class="[posterImageStatus ? 'noscroll product-con' : 'product-con']"
    v-show="domStatus"
  >
    <ProductConSwiper :imgUrls="imgUrls"></ProductConSwiper>
    <div class="nav acea-row row-between-wrapper">
      <div class="money">
        ￥<span class="num" v-text="storeInfo.price"></span
        ><span class="y-money" v-text="'￥' + storeInfo.otPrice"></span>
      </div>
      <div class="acea-row row-middle">
        <div class="times">
          <div>距秒杀结束仅剩</div>
          <CountDown
            :is-day="false"
            :tip-text="''"
            :day-text="''"
            :hour-text="' : '"
            :minute-text="' : '"
            :second-text="''"
            :datatime="datatime"
          ></CountDown>
        </div>
        <div class="iconfont icon-jiantou"></div>
      </div>
    </div>
    <div class="wrapperRush">
      <div class="introduce acea-row row-between">
        <div class="infor" v-text="storeInfo.title"></div>
      </div>
      <div class="label acea-row row-middle">
        <div class="stock" v-text="'库存:' + storeInfo.stock + '件'"></div>
        <div v-text="'销量:' + storeInfo.sales + '件'"></div>
      </div>
    </div>
    <div class="attribute acea-row row-between-wrapper" @click="selecAttrTap">
      <div>
        {{ attrTxt }}：<span class="atterTxt">{{ attrValue }}</span>
      </div>
      <div class="iconfont icon-jiantou"></div>
    </div>

    <div class="product-intro">
      <div class="title">产品介绍</div>
      <div class="conter" v-html="storeInfo.description"></div>
    </div>
    <div style="height:1.2rem;"></div>
    <div class="footerRush acea-row row-between-wrapper">
      <div
        class="item acea-row row-center-wrapper row-column"
        @click="setCollect"
      >
        <div
          class="iconfont"
          :class="userCollect ? 'icon-shoucang1' : 'icon-shoucang'"
        ></div>
        <div>收藏</div>
      </div>
      <div
        class="bnt acea-row"
        v-if="
          $route.params.status === '1' &&
            storeInfo.num > 0 &&
            storeInfo.stock > 0
        "
      >
        <div class="joinCart" @click="openAlone">原价购买</div>
        <div class="buy" @click="tapBuy">立即抢购</div>
      </div>
      <div
        class="bnt acea-row"
        v-if="
          $route.params.status === '1' &&
            storeInfo.num <= 0 &&
            storeInfo.stock <= 0
        "
      >
        <div class="joinCart" @click="openAlone">原价购买</div>
        <div class="buy bg-color-hui">已售罄</div>
      </div>
      <div class="bnt acea-row" v-if="$route.params.status === '2'">
        <div class="joinCart" @click="openAlone">原价购买</div>
        <div class="buy bg-color-hui">即将开始</div>
      </div>
      <div class="bnt acea-row" v-if="$route.params.status === '0'">
        <div class="joinCart" @click="openAlone">原价购买</div>
        <div class="buy bg-color-hui">已结束</div>
      </div>
    </div>
    <ProductWindow v-on:changeFun="changeFun" :attr="attr"></ProductWindow>
  </div>
</template>
<style scoped>
.noscroll {
  height: 100%;
  overflow: hidden;
}
</style>
<script>
import ProductConSwiper from "@components/ProductConSwiper";
import CountDown from "@components/CountDown";
import ProductWindow from "@components/ProductWindow";
import StorePoster from "@components/StorePoster";
import { getSeckillDetail } from "@api/activity";
import { postCartAdd } from "@api/store";
import { getCollectAdd, getCollectDel } from "@api/user";
const NAME = "SeckillDetails";

export default {
  name: "SeckillDetails",
  components: {
    ProductConSwiper,
    CountDown,
    ProductWindow,
    StorePoster
  },
  props: {},
  data: function() {
    return {
      domStatus: false,
      posterImageStatus: false,
      action: "",
      imgUrls: [],
      storeInfo: [],
      replyCount: 0,
      reply: [],
      cartNum: 1,
      attrTxt: "请选择",
      attrValue: "",
      productValue: [],
      isOpen: false, //是否打开属性组件
      attr: {
        cartAttr: false,
        productAttr: [],
        productSelect: {
          image: "",
          store_name: "",
          seckillPrice: "",
          seckillStock: "",
          unique: "",
          cart_num: 1
        }
      },
      datatime: 0,
      userCollect: false
    };
  },
  watch: {
    $route: function(n) {
      var that = this;
      console.log(n);
      if (n.name === NAME) {
        that.mountedStart();
      }
    }
  },
  mounted: function() {
    this.mountedStart();
  },
  methods: {
    //收藏商品
    setCollect: function() {
      let that = this,
        id = that.storeInfo.productId,
        category = "product";
      if (that.userCollect) {
        getCollectDel(id, category).then(function() {
          that.userCollect = !that.userCollect;
        });
      } else {
        getCollectAdd(id, category).then(function() {
          that.userCollect = !that.userCollect;
        });
      }
    },
    openAlone: function() {
      this.$router.push({ path: "/detail/" + this.storeInfo.productId });
    },
    //打开属性插件；
    selecAttrTap: function() {
      this.attr.cartAttr = true;
      this.isOpen = true;
    },
    changeattr: function(msg) {
      this.attr.cartAttr = msg;
      this.isOpen = false;
    },
    //选择属性；
    ChangeAttr: function(res) {
      //console.log(res);
      let productSelect = this.productValue[res];
      //console.log(this.productValue);
      //console.log(productSelect);
      if (productSelect) {
        this.$set(this.attr.productSelect, "image", productSelect.image);
        this.$set(this.attr.productSelect, "price", productSelect.seckillPrice);
        this.$set(this.attr.productSelect, "stock", productSelect.seckillStock);
        this.$set(this.attr.productSelect, "unique", productSelect.unique);
        this.$set(this.attr.productSelect, "cart_num", 1);
        this.$set(this, "attrValue", res);
        this.$set(this, "attrTxt", "已选择");
      } else {
        this.$set(this.attr.productSelect, "image", this.storeInfo.image);
        this.$set(
          this.attr.productSelect,
          "price",
          this.storeInfo.seckillPrice
        );
        this.$set(this.attr.productSelect, "stock", 0);
        this.$set(this.attr.productSelect, "unique", "");
        this.$set(this.attr.productSelect, "cart_num", 0);
        this.$set(this, "attrValue", "");
        this.$set(this, "attrTxt", "请选择");
      }
    },
    //默认选中属性；
    DefaultSelect: function() {
      let productAttr = this.attr.productAttr;
      let value = [];
      for (let i = 0; i < productAttr.length; i++) {
        this.$set(productAttr[i], "index", 0);
        //console.log(productAttr[i])
        //console.log(productAttr[i].attrValueArr[0])
        value.push(productAttr[i].attrValueArr[0]);
      }
      // //console.log(9999999)
      //console.log(value)
      // //console.log(value.sort().join(","))
      //sort();排序函数:数字-英文-汉字；
      let productSelect = this.productValue[value.sort().join(",")];
      //console.log(productSelect);
      if (productSelect && productAttr.length) {
        this.$set(
          this.attr.productSelect,
          "store_name",
          this.storeInfo.storeName
        );
        //console.log("productSelect:" + productSelect);
        this.$set(this.attr.productSelect, "image", productSelect.image);
        this.$set(this.attr.productSelect, "price", productSelect.seckillPrice);
        this.$set(this.attr.productSelect, "stock", productSelect.seckillStock);
        this.$set(this.attr.productSelect, "unique", productSelect.unique);
        this.$set(this.attr.productSelect, "cart_num", 1);
        this.$set(this, "attrValue", value.sort().join(","));
        this.$set(this, "attrTxt", "已选择");
      } else if (!productSelect && productAttr.length) {
        this.$set(
          this.attr.productSelect,
          "store_name",
          this.storeInfo.storeName
        );
        this.$set(this.attr.productSelect, "image", this.storeInfo.image);
        this.$set(
          this.attr.productSelect,
          "price",
          this.storeInfo.seckillPrice
        );
        this.$set(this.attr.productSelect, "stock", 0);
        this.$set(this.attr.productSelect, "unique", "");
        this.$set(this.attr.productSelect, "cart_num", 0);
        this.$set(this, "attrValue", "");
        this.$set(this, "attrTxt", "请选择");
      } else if (!productSelect && !productAttr.length) {
        this.$set(
          this.attr.productSelect,
          "store_name",
          this.storeInfo.storeName
        );
        this.$set(this.attr.productSelect, "image", this.storeInfo.image);
        this.$set(
          this.attr.productSelect,
          "price",
          this.storeInfo.seckillPrice
        );
        this.$set(
          this.attr.productSelect,
          "stock",
          this.storeInfo.seckillStock
        );
        this.$set(
          this.attr.productSelect,
          "unique",
          this.storeInfo.unique || ""
        );
        this.$set(this.attr.productSelect, "cart_num", 1);
        this.$set(this, "attrValue", "");
        this.$set(this, "attrTxt", "请选择");
      }
    },
    mountedStart: function() {
      var that = this;
      let id = that.$route.params.id;
      that.datatime = parseInt(that.$route.params.time);
      getSeckillDetail(id).then(res => {
        that.$set(that, "storeInfo", res.data.storeInfo);
        that.$set(that.attr, "productAttr", res.data.productAttr);
        that.$set(that, "productValue", res.data.productValue);
        that.$set(that, "imgUrls", res.data.storeInfo.sliderImageArr);
        that.$set(that, "replyCount", res.data.replyCount);
        that.$set(that, "reply", res.data.reply);
        that.$set(that, "userCollect", res.data.userCollect);
        that.updateTitle();
        that.DefaultSelect();
        that.setProductSelect();
        that.domStatus = true;
      });
    },
    updateTitle() {
      document.title = this.storeInfo.title || this.$route.meta.title;
    },
    //购物车；
    ChangeCartNum: function(changeValue) {
      //changeValue:是否 加|减
      //获取当前变动属性
      let productSelect = this.productValue[this.attrValue];
      //如果没有属性,赋值给商品默认库存
      if (productSelect === undefined && !this.attr.productAttr.length)
        productSelect = this.attr.productSelect;
      //无属性值即库存为0；不存在加减；
      if (productSelect === undefined) return;
      let stock = productSelect.pinStock || 0;
      let num = this.attr.productSelect;
      if (changeValue) {
        num.cart_num++;
        if (num.cart_num > stock) {
          this.$set(this.attr.productSelect, "cart_num", stock);
          this.$set(this, "cart_num", stock);
        }
      } else {
        num.cart_num--;
        if (num.cart_num < 1) {
          this.$set(this.attr.productSelect, "cart_num", 1);
          this.$set(this, "cart_num", 1);
        }
      }
    },
    setPosterImageStatus: function() {
      var sTop = document.body || document.documentElement;
      sTop.scrollTop = 0;
      this.posterImageStatus = !this.posterImageStatus;
    },
    //将父级向子集多次传送的函数合二为一；
    changeFun: function(opt) {
      if (typeof opt !== "object") opt = {};
      let action = opt.action || "";
      let value = opt.value === undefined ? "" : opt.value;
      this[action] && this[action](value);
    },
    // changeattr: function(res) {
    //   var that = this;
    //   that.attr.cartAttr = res;
    // },
    // ChangeCartNum: function(res) {
    //   var that = this;
    //   if (res) {
    //     if (that.attr.productSelect.cart_num < that.storeInfo.stock) {
    //       that.attr.productSelect.cart_num++;
    //     }
    //   } else {
    //     if (that.attr.productSelect.cart_num > 1) {
    //       that.attr.productSelect.cart_num--;
    //     }
    //   }
    // },
    setProductSelect: function() {
      var that = this;
      var attr = that.attr;
      attr.productSelect.image = that.storeInfo.image;
      attr.productSelect.store_name = that.storeInfo.title;
      attr.productSelect.price = that.storeInfo.price;
      attr.productSelect.stock = that.storeInfo.stock;
      attr.cartAttr = false;
      that.$set(that, "attr", attr);
    },
    tapBuy: function() {
      var that = this;
      if (that.attr.cartAttr == false) {
        that.attr.cartAttr = !this.attr.attrcartAttr;
      } else {
        var data = {};
        data.productId = that.storeInfo.productId;
        data.cartNum = that.attr.productSelect.cart_num;
        data.uniqueId = that.attr.productSelect.unique;
        data.secKillId = that.storeInfo.id;
        data.new = 1;
        postCartAdd(data)
          .then(res => {
            that.$router.push({
              path: "/order/submit/" + res.data.cartId
            });
          })
          .catch(res => {
            console.log(res);
            this.$dialog.error(res.msg);
          });
      }
    }
  }
};
</script>
<style scoped>
.product-con .nav {
  padding: 0 0.2rem;
}
.bg-color-hui {
  background: #bbbbbb !important;
  line-height: 0.76rem;
  text-align: center;
}
.product-con .bnt {
  width: 90%;
  height: 0.76rem;
  color: #fff;
  font-size: 0.28rem;
}
.product-con .bnt > div {
  width: 50%;
  text-align: center;
  line-height: 0.76rem;
}
.product-con .bnt .joinCart {
  border-radius: 0.5rem 0 0 0.5rem;
  background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
  background-image: -webkit-linear-gradient(to right, #fea10f 0%, #fa8013 100%);
  background-image: -moz-linear-gradient(to right, #fea10f 0%, #fa8013 100%);
}
.product-con .bnt .buy {
  border-radius: 0 0.5rem 0.5rem 0;
  background-image: linear-gradient(to right, #eb3729 0%, #eb3729 100%);
  background-image: -webkit-linear-gradient(to right, #eb3729 0%, #eb3729 100%);
  background-image: -moz-linear-gradient(to right, #eb3729 0%, #eb3729 100%);
}

.icon-shoucang1 {
  color: #e93323;
}
</style>
